<script>
import outMain from "@/components/outMain.vue";
import bigImg from "@/components/public/bigImg.vue";

import { ElMessage, ElMessageBox } from "element-plus";
import {
  tgyDetails,
  tgyDetails1,
  tgyDetails2,
  tgyDetails3,
  txsh,
} from "@/http/api";
export default {
  components: { outMain, bigImg },
  name: "",
  data() {
    return {
      showMoneyDetail: false,
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "佣金变更明细", id: 2 },
        { name: "提现记录", id: 3 },
      ],
      gridData: [],
      stepId: 1,
      formData: {},
      queryData: {
        tgy_id: this.$route.query.id,
        page: 1,
        per_page: 10,
      },
      tableData: [{}],
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 2) {
        this.getBoots();
      } else if (this.stepId === 3) {
        this.getPayFn();
      }
    },
    async getPayFn() {
      const { data } = await tgyDetails2(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getBoots() {
      const { data } = await tgyDetails1(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    getData() {
      tgyDetails({ tgy_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    questCheck(data) {
      txsh(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.serchFn();
          this.getData();
        }
      });
    },
    checkStatus(row, type) {
      if (type == 2) {
        ElMessageBox.confirm(
          "确定通过选择的佣金提现申请吗?通过后微信将自动打款，请谨慎操作认真核对。",
          "操作提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          let data = {
            withdrawal_id: row.withdrawal_id,
            status: type,
          };
          this.questCheck(data);
        });
      } else {
        ElMessageBox.prompt("确定驳回选择的佣金提现申请吗?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then((value) => {
          let data = {
            withdrawal_id: row.withdrawal_id,
            status: type,
            bh_reason: value.value,
          };
          this.questCheck(data);
        });
      }
    },
    getMoneyDetail(item) {
      let data = {
        withdrawal_id: item.withdrawal_id,
      };
      tgyDetails3(data).then((res) => {
        if (res.data.code == 1) {
          this.gridData = res.data.data.data;
          this.showMoneyDetail = true;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>推广员详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">账号昵称</div>
                  <div class="desText">{{ formData.nick_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">姓名</div>
                  <div class="desText">{{ formData.tgy_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.tgy_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">账号状态</div>
                  <div class="desText">
                    <el-tag v-if="formData.examine_status == 1">待审核</el-tag>
                    <el-tag type="success" v-if="formData.examine_status == 2"
                      >已通过</el-tag
                    >
                    <el-tag type="danger" v-if="formData.examine_status == 3"
                      >已驳回</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">学校/企业</div>
                  <div class="desText">
                    {{ formData.tgy_school_enterprise }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">累计佣金</div>
                  <div class="desText">{{ formData.ljyj }}元</div>
                </div>
                <div class="desItem">
                  <div class="desName">已提现佣金</div>
                  <div class="desText">{{ formData.ljtx }}元</div>
                </div>
                <div class="desItem">
                  <div class="desName">待到账佣金</div>
                  <div class="desText">{{ formData.ddz }}元</div>
                </div>
                <div class="desItem">
                  <div class="desName">可提现佣金</div>
                  <div class="desText">{{ formData.ktx }}元</div>
                </div>
                <div class="desItem">
                  <div class="desName">申请时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">审核时间</div>
                  <div class="desText">{{ formData.examine_time }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">佣金变更明显（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="sign_number"
                  show-overflow-tooltip
                  label="订单号"
                />
                <el-table-column
                  prop="training_name"
                  show-overflow-tooltip
                  label="培训项目"
                />
                <el-table-column
                  prop="training_number"
                  show-overflow-tooltip
                  label="培训编号"
                />
                <el-table-column
                  prop="qwyx"
                  show-overflow-tooltip
                  label="佣金金额"
                >
                  <template #default="{ row }">
                    {{ row.tg_commission }}元
                  </template>
                </el-table-column>
                <el-table-column
                  prop="account_time"
                  show-overflow-tooltip
                  label="到账时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">提现记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="withdrawal_number"
                  width="220"
                  show-overflow-tooltip
                  label="提现单号"
                />
                <el-table-column show-overflow-tooltip label="提现金额">
                  <template #default="{ row }">
                    <el-button link @click="getMoneyDetail(row)">
                      {{ row.commission }}(元)
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="审核状态">
                  <template #default="{ row }">
                    <el-tag v-if="row.status == 1">待审核</el-tag>
                    <el-tag type="success" v-if="row.status == 2"
                      >已通过</el-tag
                    >
                    <el-tag type="danger" v-if="row.status == 3">已驳回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  width="170"
                  show-overflow-tooltip
                  label="申请时间"
                />
                <el-table-column
                  prop="examine_time"
                  width="170"
                  show-overflow-tooltip
                  label="审核时间"
                />
                <el-table-column
                  prop="bh_reason"
                  show-overflow-tooltip
                  label="驳回原因"
                />
                <el-table-column prop="Name" width="100" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        v-if="row.status == 1"
                        class="blueText ctrlText"
                        @click="checkStatus(row, 2)"
                      >
                        通过
                      </div>
                      <div
                        v-if="row.status == 1"
                        class="redText ctrlText"
                        @click="checkStatus(row, 3)"
                      >
                        驳回
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="showMoneyDetail"
        align-center
        title="提现明细订单"
        width="1000"
      >
        <el-table :data="gridData">
          <el-table-column property="sign_number" label="订单号" />
          <el-table-column property="training_name" label="培训项目" />
          <el-table-column property="tg_commission" label="佣金金额" />
          <el-table-column
            width="170"
            property="create_time"
            label="创建时间"
          />
          <el-table-column
            width="170"
            property="complete_time"
            label="核销时间"
          />
          <el-table-column
            width="170"
            property="account_time"
            label="到账时间"
          />
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showMoneyDetail = false">取消</el-button>
            <el-button type="primary" @click="showMoneyDetail = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
